<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" :rules="rules">
                        <el-form-item label="日期" prop="dataTime" label-width="40px">
                          <WeekTimePicker type="date" v-model="queryParams.createTime" style="width: 130px"/>
                          <span style="margin: 0px 6px;">~</span>
                          <WeekTimePicker type="date" v-model="queryParams.endTime" style="width: 130px" />
                        </el-form-item>
                        <el-form-item label="制造区域" prop="factoryAreaId">
                            <el-select v-model="queryParams.factoryAreaId" placeholder="请选择制造区域" @change="areaChange" style="width: 120px">
                                <el-option
                                        v-for="dict in factoryAreaIdOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="制造类型" prop="productionTypeId">
                            <el-select v-model="queryParams.productionTypeId" placeholder="请选择制造类型" @change="productionTypeIdChange" style="width: 120px">
                                <el-option
                                        v-for="dict in listProductionTypeOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="设备类型" prop="machineTypeId">
                            <el-select v-model="queryParams.machineTypeId" placeholder="请选择设备类型" style="width: 120px">
                                <el-option
                                        v-for="dict in listMachineTypeOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="样本范围" prop="AttType">
                            <el-select v-model="queryParams.AttType" style="width: 60px">
                                <el-option
                                        v-for="dict in attTypeOptions"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <span style="margin-left: 10px; color: red;">※ 系统每天上午10:30结束前一天的"AST管理" & "AST分析"业务数据更新</span>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" @update:showSearch="showSearch ? height = 'calc(100% - 100px)' : height = 'calc(100% - 62px)'">
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
                <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['ASTManage:astEqp:export']"
                >导出</el-button>
            </right-toolbar>
        </el-row>

        <t-ag-grid
            v-loading="loading"
            :style="{height}"
            :column-defs="column"
            :row-data="tableData"
            :row-buffer="20"
            row-selection="multiple"
            :suppress-row-click-selection="true"
            :row-multi-select-with-click="true"
            align="center"
            :defaultColDef = "{
                // suppressMenu:true
                menuTabs: ['filterMenuTab', 'columnsMenuTab']
            }"
            header-align="center"
            />
        <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
        />

    </div>
</template>

<script setup name="AstEqp">
  import { listAstEqp } from "@/api/ASTManage/astEqp"
  import { factoryAreaIdOptions } from '@/common/options'
  import { getMachineTypeId, getModelType } from '@/common/affect'

  import { column } from './config'
  import moment from 'moment'

  column.forEach((item) => {
    item.filter = 'agMultiColumnFilter'
  })

  const { proxy } = getCurrentInstance()

  const tableData = ref([])
  const loading = ref(false)
  const showSearch = ref(true)
  const total = ref(0)
  /**
   * 解决 AST_UNIT & AST_EQP 页面会造成共用混乱的情况，单独赋值
  */
  const listProductionTypeOptions = ref([])
  const listMachineTypeOptions = ref([])

  const height = ref('calc(100% - 100px)')

  const attTypeOptions = [
    { label: 1, value: 1 },
    { label: 10, value: 10 }
  ]

  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 1000,
      dataTime: null,
      createTime: moment().subtract(1, 'days').format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD'),
      factoryAreaId: '层前',
      productionTypeId: '叠瓦',
      machineTypeId: null,
      topMachineId: null,
      AttType: ref(1)
    },
    rules: {
      factoryAreaId: [
        { required: true, message: "制造区域不能为空", trigger: "change" }
      ]
    }
  })

  const { queryParams, rules } = toRefs(data)

  /** 查询设备AST_UNIT列表 */
  function getList() {
    console.log(queryParams.value)
    loading.value = true

    queryParams.value.createTime = moment(queryParams.value.createTime).format('YYYY-MM-DD')
    queryParams.value.endTime = moment(queryParams.value.endTime).format('YYYY-MM-DD')
    listAstEqp(queryParams.value).then(response => {
      tableData.value = response.rows
      total.value = response.total
      loading.value = false
    })
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    proxy.$refs.queryRef.validate(valid => { // 表单校验
      if (valid) {
        queryParams.value.pageNum = 1
        getList()
      }
    })
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef")
    handleQuery()
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('ASTManage/astEqp/export', {
      ...queryParams.value
    }, `设备AST_EQP_${new Date().getTime()}.xlsx`)
  }

  /**
   * 级联
   *
   * 制造类型
  */
  const areaChange = (target, flag) => {
    if(flag !== 'cls'){
      queryParams.value.productionTypeId = null
    }
    queryParams.value.machineTypeId = null
    listProductionTypeOptions.value = []
    if(!target.length) return
    getModelType({
      factoryAreaIdList: queryParams.value.factoryAreaId
    }).then((res) => {
      res.rows.forEach(item => {
        listProductionTypeOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  /**
   * 级联
   *
   * 设备类型
   */
  const productionTypeIdChange = (target) => {
    queryParams.value.machineTypeId = null
    listMachineTypeOptions.value = []
    if(!target.length) return
    getMachineTypeId({
      productionTypeIdList: queryParams.value.productionTypeId,
      isMainmachineType: 'N' // 固定参数（必传）
    }).then((res) => {
      res.rows.forEach(item => {
        listMachineTypeOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  // getList()
  areaChange('层前', 'cls')
  productionTypeIdChange('叠瓦')
</script>
